iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 23

學習筆記:一起進入 PixiJS 的世界 (四)

  • 分享至 

  • xImage
  •  

建立文字物件

使用new建構出PIXI.Text()文字物件,並將文字的內容做為第一個參數傳入,再將其放置進之前建構的場景中,即可建立基礎的文字物件。

//建立出一個基礎場景,將建立出來的場景放入網頁中
let app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);
//建立出一個文字物件,將物件放置場景中
let myText = new PIXI.Text('新的文字物件');
app.stage.addChild(myText);

來點有趣的文字樣式

使用PIXI.Text()建構文字物件時,第二個參數可以傳入定義style的樣式物件,即可將樣式套用在建立的文字中,讓文字的效果更加多元。

//先定義樣式,並指定一個變數
let style = new PIXI.TextStyle({
    fontFamily: 'Roboto',
    fontSize: 36,
    fontWeight: 'bold',
    fill: '#ffdd00',
    dropShadow: true,
    dropShadowColor: '#ddd',
    dropShadowBlur: 5
    });
//建立文字物件,傳入文字內容與剛剛建立的樣式
let myText = new PIXI.Text('新的文字',style);
app.stage.addChild(myText);

上一篇
學習筆記:一起進入 PixiJS 的世界 (三)
下一篇
學習筆記:一起進入 PixiJS 的世界 (五)
系列文
動起來吧!Web Motion 動態特效網頁學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言